<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视数据_$witch</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
    监视属性watch：
        1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
        2.监视的属性必须存在，才能进行监视！！
        3.监视的两种写法：
            (1).new Vue时传入watch配置
            (2).通过vm.$watch监视-->
<h2>今天天气很{{isHot?'炎热':'凉爽'}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    const vm=new Vue({
        el:"#root",
        data(){
            return {
             isHot:true
            }
        },
        methods:{
            changeWeather() {
                this.isHot=!this.isHot
            }
        },
    })
    //对象的写法
/*    vm.$watch("isHot",{
        immediate:true,
        handler(n,o){
            console.log('isHot被修改了',n,o)
        }
    })*/
    //函数的写法
    vm.$watch('isHot',function (n,o){
        console.log('isHot被修改了',n,o)
    })
</script>
</body>
</html>